<template>
  <div class="shenQ6">
    <div class="box">
<!--      <div class="top">-->
<!--        <img src="../assets/img/phoneTop.png" alt="">-->
<!--        <p>-->
<!--          <img src="../assets/img/lJianTou.png" alt="" @click="up">-->
<!--          <span>收件材料</span>-->
<!--          <span>暂存</span>-->
<!--        </p>-->
<!--      </div>-->
      <NavBarTop pageTit="收件材料" :needPhoneTop="false" :needZanC="true"></NavBarTop>
      <div class="content">
        <div class="item">
          <span>保障性住房申请表<span style="color: red"> *</span></span>
          <van-uploader v-model="uploader1" :max-count="2">
            <img src="../assets/img/box1.png" alt="">
          </van-uploader>
        </div>
        <div class="item">
          <span>申请人及家庭成员收入证明或低保户、低收入认定书<span style="color: red"> *</span></span>
          <van-uploader v-model="uploader2" :max-count="2">
            <img src="../assets/img/box1.png" alt="">
          </van-uploader>
        </div>
        <div class="item">
          <span>申请人及家庭成员身份证、户口簿（外来务工人员还需提供居住证）<span style="color: red"> *</span></span>
          <van-uploader v-model="uploader3" :max-count="2" class="item-4">
            <img src="../assets/img/box1.png" alt="">
          </van-uploader>
        </div>
        <div class="item">
          <span>申请人及家庭成员婚姻状况证明<span style="color: red"> *</span></span>
          <van-uploader v-model="uploader4" :max-count="2">
            <img src="../assets/img/box1.png" alt="">
          </van-uploader>
        </div>
        <van-button type="primary" @click="finesh">完 成</van-button>

      </div>
    </div>
  </div>
</template>
<script>
import { Field, Button, Cascader, Uploader, Toast } from 'vant';
import  NavBarTop from '@/components/navBar.vue'

export default {
  data(){
    return{
      uploader1:[],
      uploader2:[],
      uploader3:[],
      uploader4:[],
    }
  },
  components: {
    NavBarTop,
    [Field.name]: Field,
    [Button.name]: Button,
    [Cascader.name]: Cascader,
    [Uploader.name]: Uploader,
    [Toast.name]: Toast,
  },
  methods: {
    finesh () {
      this.$toast({
        message:'申请成功',
        type:"success",
        duration:800
      });
      setTimeout(()=>{
      this.$router.push('/home')
      },800)
    },
    up () {
      this.$router.go(-1)
    }
  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.shenQ6{
  font-size: 0;
}
hr {
  width: 3.45rem;
  margin-left: 0.15rem;
  background-color: #f8f8f9;
}
.box {
  width: 3.75rem;
  height: 8.12rem;
}
.top {
  position: relative;
  width: 3.75rem;
  height: 0.88rem;
  background-color: #ffffff;
}
.top > img {
  position: absolute;
  width: 3.75rem;
}
.top > p > span {
  margin-left: 1.2rem;
}
.top > p {
  margin: 0;
  position: absolute;
  font-size: 0.16rem;
  margin-top: 0.5rem;
  text-align: center;
}
.top > p > img {
  width: 0.08rem;
  height: 0.14rem;
  margin-left: 0.15rem;
}
.content {
  position: relative;
  width: 100%;
  background-color: #ffffff;
  padding: 0 .15rem;
  box-sizing: border-box;
}

.item {
  width: 3.45rem;
  border-bottom: 0.01rem solid#F2F3F5;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-bottom: .15rem;
}
.item:nth-child(4){
  border: none;
}
.item > span {
  font-size: 0.14rem;
  margin-top: 0.15rem;
}
.van-uploader img {
  width: .8rem;
  height: .8rem;
  margin-top: 0.15rem;
}
.van-button {
  width: 3.45rem;
  height: 0.51rem;
  border-radius: 0.32rem;
  background-color: #147bf5;
  margin-top: .15rem;
}
  /deep/.van-uploader__preview{
    margin-top: .15rem;
  }
</style>
